<template>
    <transition name="fade">
        <div v-if="visual1">
            <div class="x-dialog" >
                <div class="head">
                    <span class="title">{{title}}</span>
                    <div class="close-btn" @click="visual1=false" v-if="closeable">+</div>
                </div>
                <div class="body">
                    <slot></slot>
                </div>
            </div>
            <div class="mask" ></div>
        </div>
    </transition>
</template>

<script>
export default {
  props: {
    title: String,
    visual: Boolean,
    closeable: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      visual1: false
    }
  },
  watch: {
    visual (val) {
      this.visual1 = val
    },
    visual1 (val) {
      if (this.visual !== val) {
        this.$emit('update:visual', val)
      }
    }
  },
  created () {
    this.visual1 = this.visual
  }

}
</script>

<style scoped lang="scss">
.x-dialog{
    z-index: 100;
    min-width: 670px;
    background-color: #ffffff;
    box-shadow: 4px 4px 18px 0px rgba(238, 173, 81, 0.69);
    border-radius: 8px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top:12vh;
    .head{
        height: 110px;
        line-height: 110px;
        text-align: center;
        position: relative;
        .title{
            font-size: 36px;
            color: #ef3d3d;
            letter-spacing: 2px;
        }
        .close-btn{
            line-height: 50px;
            display: inline-block;
            font-size: 50px;
            color:#aaaaaa;
            transform: rotate(45deg);
            top:14px;
            right: 14px;
            position: absolute;
        }
    }

    .body{
        width: 100%;
        padding: 0px 40px 40px 40px;
        max-height: 65vh;
        font-size: 24px;
        color:#333333;
        overflow-y: auto;
        margin-bottom: 40px;
        -webkit-overflow-scrolling: touch;
    }
}
.mask{
    z-index:90;
    position: fixed;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.45);
}
</style>
